<template>
	<view class="alumni-card-apply">
		<!-- 顶部导航栏 -->
		<tn-nav-bar fixed :isBack="true" backgroundColor="#ffffff" :bottomShadow="false" @click-back="navigateBack"
			backIconColor="#ffffff">
		</tn-nav-bar>

		<!-- 头部标题区域 -->
		<view class="header">
			<text class="page-title">电子校友会会员卡</text>
			<text class="page-desc" v-if="currentStep === 0">吉林农业科技学院校友会电子会员卡权益说明</text>
			<text class="page-desc" v-else>申请吉林农业科技学院校友会电子会员卡将获得更多权益</text>
		</view>

		<!-- 步骤条 -->
		<view class="steps-container">
			<tn-steps mode="number" :list="stepsList" :current="currentStep" @click="handleStepClick"></tn-steps>
		</view>

		<!-- 步骤内容区域 -->
		<view class="content-card">
			<!-- 步骤1：权益说明 -->
			<view v-if="currentStep === 0" class="step-content">
				<view class="benefit-list">
					<view class="benefit-item" v-for="(item, index) in benefitList" :key="index">
						<view class="benefit-number">{{ index + 1 }}</view>
						<view class="benefit-text">{{ item }}</view>
					</view>
				</view>
			</view>

			<!-- 步骤2：信息确认 -->
			<view v-if="currentStep === 1" class="step-content">
				<view class="form-item">
					<text class="item-label">姓名 <text class="required">*</text></text>
					<input class="item-input" placeholder="请输入姓名" v-model="formData.name" />
				</view>
				<view class="divider"></view>

				<view class="form-item">
					<text class="item-label">性别 <text class="required">*</text></text>
					<view class="gender-select">
						<radio-group v-model="formData.gender">
							<label class="radio-label">
								<radio value="male" /> 男
							</label>
							<label class="radio-label">
								<radio value="female" /> 女
							</label>
						</radio-group>
					</view>
				</view>
				<view class="divider"></view>

				<view class="form-item">
					<text class="item-label">联系电话 <text class="required">*</text></text>
					<input class="item-input" type="number" placeholder="请输入联系电话" v-model="formData.phone" />
				</view>
				<view class="divider"></view>

				<view class="form-item">
					<text class="item-label">身份证号 <text class="required">*</text></text>
					<input class="item-input" placeholder="请输入身份证号" v-model="formData.idCard" />
				</view>
				<view class="divider"></view>

				<view class="form-item">
					<text class="item-label">入学年份</text>
					<input class="item-input" placeholder="请选择入学年份" v-model="formData.admissionYear" />
				</view>
				<view class="divider"></view>

				<view class="form-item">
					<text class="item-label">学院</text>
					<input class="item-input" placeholder="请选择所属学院" v-model="formData.college" />
				</view>
				<view class="divider"></view>

				<view class="form-item">
					<text class="item-label">专业</text>
					<input class="item-input" placeholder="请输入专业" v-model="formData.major" />
				</view>
			</view>

			<!-- 步骤3：会员缴费 -->
			<view v-if="currentStep === 2" class="step-content">
				<view class="card-preview">
					<view class="card-inner">
						<view class="card-logo">
							<image src="/static/tabbar/navlogo.png" mode="widthFix" class="logo-img"></image>
						</view>
						<view class="card-title">吉林农业科技学院电子校友卡</view>
						<view class="card-subtitle"></view>
						<view class="card-holder">持卡人: {{ formData.name || '待填写' }}</view>
					</view>
				</view>
				<view class="payment-info">
					<view class="info-item">
						<text>会员费用</text>
						<text class="price">¥200/年</text>
					</view>
					<view class="info-item">
						<text>当前申请人数</text>
						<text>1109人</text>
					</view>
					<view class="info-item">
						<text>同城校友组织</text>
						<text>38个</text>
					</view>
					<view class="payment-method">
						<text class="method-label">支付方式</text>
						<view class="method-options">
							<label class="method-radio">
								<radio value="wechat" checked /> 微信支付
							</label>
							<label class="method-radio">
								<radio value="alipay" /> 支付宝
							</label>
						</view>
					</view>
				</view>
			</view>

			<!-- 步骤4：审核认证 -->
			<view v-if="currentStep === 3" class="step-content">
				<view class="verify-info">
					<uni-icons type="waiting" size="60" color="#4caf50" class="verify-icon"></uni-icons>
					<text class="verify-text">请等待管理员审核您的申请信息</text>
					<text class="verify-desc">审核结果将通过短信通知您，请保持手机畅通</text>

					<view class="progress-container">
						<view class="progress-bar">
							<view class="progress-fill" :style="{ width: verifyProgress + '%' }"></view>
						</view>
						<text class="progress-text">{{ verifyProgress }}% 已完成</text>
					</view>
				</view>
			</view>

			<!-- 步骤5：完成领卡 -->
			<view v-if="currentStep === 4" class="step-content">
				<view class="success-info">
					<uni-icons type="success" size="60" color="#4caf50" class="success-icon"></uni-icons>
					<text class="success-text">恭喜您，电子校友卡申请成功！</text>
					<text class="success-desc">您的电子校友卡已激活，可在"我的"页面查看</text>

					<view class="card-final-preview">
						<image src="/static/card-example.png" mode="widthFix" class="final-card-img"></image>
					</view>

					<text class="card-number">卡号: {{ generateCardNumber() }}</text>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="button-group">
			<button class="prev-btn" @click="prevStep" v-if="currentStep > 0 && currentStep < 4">
				上一步
			</button>
			<button class="next-btn" @click="nextStep" v-if="currentStep < 4"
				:style="{ flex: currentStep === 0 ? 1 : 1 }">
				{{ currentStep === 3 ? '完成' : '下一步' }}
			</button>
			<button class="finish-btn" @click="navigateToMyCard" v-if="currentStep === 4">
				查看我的校友卡
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentStep: 0, // 当前步骤索引
				stepsList: [{
						name: '申请领卡'
					},
					{
						name: '信息确认'
					},
					{
						name: '会员缴费'
					},
					{
						name: '审核认证'
					},
					{
						name: '完成领卡'
					}
				],
				benefitList: [
					'凭会员卡进入校图书馆参观并阅览图书。',
					'可在学校非统一安排时间内进入操场等室外运动场所。',
					'进入校园后，校友会秘书处提供免费食宿。',
					'可优先预约参观校史馆、标本馆。',
					'各种校友会活动等场合的会员身份证明。',
					'进出校园的有效凭证(特殊时期除外)。'
				],
				formData: {
					name: '',
					gender: 'male',
					phone: '',
					idCard: '',
					admissionYear: '',
					college: '',
					major: ''
				},
				verifyProgress: 0, // 审核进度
				paymentMethod: 'wechat' // 默认支付方式
			}
		},
		onShow() {
			// 如果进入审核步骤，模拟进度更新
			if (this.currentStep === 3 && this.verifyProgress < 100) {
				this.startVerifyProgress();
			}
		},
		methods: {
			// 下一步
			nextStep() {
				// 第二步表单验证
				if (this.currentStep === 1 && !this.validateForm()) {
					return;
				}

				// 如果是从审核步骤到完成步骤，直接设置进度为100%
				if (this.currentStep === 3) {
					this.verifyProgress = 100;
				}

				this.currentStep++;
			},

			// 上一步
			prevStep() {
				this.currentStep--;
			},

			// 点击步骤切换
			handleStepClick(index) {
				// 只能跳转到已完成或当前步骤
				if (index <= this.currentStep) {
					this.currentStep = index;
				}
			},

			// 表单验证
			validateForm() {
				if (!this.formData.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return false;
				}

				if (!this.formData.phone) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					});
					return false;
				}

				// 简单的手机号验证
				if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return false;
				}

				if (!this.formData.idCard) {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none'
					});
					return false;
				}

				// 简单的身份证号验证
				if (!/(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.formData.idCard)) {
					uni.showToast({
						title: '请输入正确的身份证号',
						icon: 'none'
					});
					return false;
				}

				return true;
			},

			// 返回上一页
			navigateBack() {
				uni.navigateBack({
					delta: 1
				});
			},

			// 查看我的校友卡
			navigateToMyCard() {
				uni.navigateTo({
					url: '/pages/mine/myCard'
				});
			},

			// 模拟审核进度
			startVerifyProgress() {
				const interval = setInterval(() => {
					this.verifyProgress += 5;
					if (this.verifyProgress >= 100) {
						this.verifyProgress = 100;
						clearInterval(interval);

						// 5秒后自动进入下一步
						if (this.currentStep === 3) {
							setTimeout(() => {
								this.nextStep();
							}, 5000);
						}
					}
				}, 1000);
			},

			// 生成随机卡号
			generateCardNumber() {
				const prefix = 'JLNY-';
				const randomNum = Math.floor(Math.random() * 100000000).toString().padStart(8, '0');
				return prefix + randomNum;
			}
		}
	}
</script>

<style scoped lang="scss">
	.alumni-card-apply {
	  background-color: #f5f7fa;
	  min-height: 100vh;
	  padding-top: 83rpx;
	}

	// 头部样式
	.header {
		background: linear-gradient(180deg, #007356 0%, #007356 100%);
		padding: 40rpx 30rpx 60rpx;
	}

	.page-title {
		font-size: 36rpx;
		color: #ffffff;
		font-weight: bold;
		display: block;
		margin-bottom: 16rpx;
	}

	.page-desc {
		font-size: 28rpx;
		color: #ffffff;
		opacity: 0.9;
		display: block;
	}

	// 步骤条容器
	.steps-container {
		padding: 30rpx;
		background-color: #fff;
		margin: 0 30rpx;
		border-radius: 16rpx;
		margin-top: -30rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	// 内容卡片
	.content-card {
		background-color: #ffffff;
		margin: 20rpx 30rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
		padding: 40rpx 30rpx;
	}

	.step-content {
		min-height: 400rpx;
	}

	// 权益列表样式
	.benefit-list {
		padding: 20rpx 0;
	}

	.benefit-item {
		display: flex;
		margin-bottom: 30rpx;
		align-items: flex-start;
	}

	.benefit-number {
		width: 40rpx;
		height: 40rpx;
		background-color: #007356;
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.benefit-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}

	// 表单样式
	.form-item {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
	}

	.item-label {
		width: 200rpx;
		font-size: 30rpx;
		color: #333;
	}

	.required {
		color: #ff3b30;
	}

	.item-input {
		flex: 1;
		font-size: 30rpx;
		color: #666;
		padding: 6rpx 0;
		border: none;
		outline: none;
		background-color: transparent;
	}

	.gender-select {
		flex: 1;
		display: flex;
		gap: 30rpx;
		padding-top: 6rpx;
	}

	.radio-label {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #666;
	}

	.divider {
		height: 1rpx;
		background-color: #F1F7ED;
	}

	// 卡片预览样式
	.card-preview {
		width: 100%;
		height: 300rpx;
		background: linear-gradient(135deg, #007356 0%, #007356 100%);
		border-radius: 16rpx;
		overflow: hidden;
		margin-bottom: 40rpx;
		position: relative;
		box-shadow: 0 10rpx 20rpx rgba(22, 93, 255, 0.2);
	}

	.card-inner {
		width: 100%;
		height: 100%;
		padding: 30rpx;
		color: #fff;
		box-sizing: border-box;
	}

	.logo-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 8rpx;
		background-color: #fff;
		padding: 5rpx;
	}

	.card-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		margin-top: 20rpx;
	}

	.card-subtitle {
		font-size: 24rpx;
		opacity: 0.8;
		margin-bottom: 30rpx;
	}

	.card-holder {
		font-size: 28rpx;
		position: absolute;
		bottom: 30rpx;
		left: 30rpx;
	}

	// 支付信息样式
	.payment-info {
		padding: 10rpx 0;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f1f1f1;
		font-size: 28rpx;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.price {
		color: #ff3b30;
		font-weight: bold;
	}

	.payment-method {
		margin-top: 30rpx;
	}

	.method-label {
		display: block;
		font-size: 30rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.method-options {
		display: flex;
		gap: 30rpx;
	}

	.method-radio {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #666;
	}

	// 审核和成功信息样式
	.verify-info,
	.success-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx 0;
		text-align: center;
	}

	.verify-icon,
	.success-icon {
		margin-bottom: 30rpx;
	}

	.verify-text,
	.success-text {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
		font-weight: bold;
	}

	.verify-desc,
	.success-desc {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
		padding: 0 30rpx;
		margin-bottom: 40rpx;
	}

	// 审核进度条
	.progress-container {
		width: 100%;
		padding: 0 20rpx;
	}

	.progress-bar {
		height: 12rpx;
		background-color: #f1f1f1;
		border-radius: 6rpx;
		overflow: hidden;
	}

	.progress-fill {
		height: 100%;
		background-color: #4caf50;
		transition: width 1s ease;
	}

	.progress-text {
		display: block;
		text-align: right;
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #666;
	}

	// 最终卡片预览
	.card-final-preview {
		margin: 30rpx 0;
		padding: 0 20rpx;
	}

	.final-card-img {
		width: 100%;
		border-radius: 16rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
	}

	.card-number {
		font-size: 28rpx;
		color: #007356;
		margin-top: 20rpx;
		font-weight: bold;
	}

	// 按钮样式
	.button-group {
		padding: 30rpx;
		display: flex;
		gap: 20rpx;
	}

	.prev-btn {
		flex: 1;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 32rpx;
		color: #007356;
		border-radius: 49rpx;
		border: 1rpx solid #007356;
		background-color: #fff;
	}

	.next-btn,
	.finish-btn {
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
		border-radius: 49rpx;
		border: none;
		background-color: #007356;
	}

	.finish-btn {
		flex: 1;
	}

	// 按钮点击效果
	.prev-btn:active {
		background-color: #f0f7ff;
	}

	.next-btn:active,
	.finish-btn:active {
		background-color: #007356;
	}
</style>